<script setup>
import HeaderCarb from './components/HeaderCarb.vue'
import LeftCarb from './components/LeftCarb.vue'
import RightCarb from './components/RightCarb.vue'
import CenterCarb from './components/CenterCarb.vue'
</script>

<template>
  <el-container style="height: 100vh; display: flex; flex-direction: column">
    <el-header style="flex: 0 0 20vh">
      <HeaderCarb></HeaderCarb>
    </el-header>
    <el-main style="display: flex">
      <LeftCarb style="flex: 1"></LeftCarb>
      <CenterCarb style="flex: 1"></CenterCarb>
      <RightCarb style="flex: 1"></RightCarb>
    </el-main>
  </el-container>
</template>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.el-container {
  height: 100vh;
  background: url('https://th.bing.com/th/id/R.ffe9b773705d64f43f9ae9853706a899?rik=QnFyLQO5jzEC1g&riu=http%3a%2f%2fhimg2.huanqiu.com%2fattachment2010%2f2018%2f0420%2f09%2f04%2f20180420090416314.jpg&ehk=ONFixS%2fBUxzbTeDz%2fYdSrkAgH1BW1MiRLIa4LRiYOd0%3d&risl=&pid=ImgRaw&r=0')
    no-repeat center center fixed;
  background-size: cover;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
el-header,
el-main {
  overflow: hidden; /* Prevent scrolling within these containers */
}
.header-content,
.left-content,
.center-content,
.right-content {
  overflow: auto; /* If necessary, allow internal scrolling */
  height: 100%; /* Ensure they take full height of their containers */
}
</style>
